<template>
  <div class="bet-list">
    <div v-for="(item, index) in list" :key="index" class="play-box">
      <div v-if="!hideTitle" class="title">
        {{ upperCase(item.playTypeName) }}
        <span class="rate" v-if="ROUND_BTNS.includes(`${item.lotteryCode}_${item.playTypeCode}`)">
          (赔率1: {{ getNumberRate(item) }})
        </span>
      </div>
      <div class="play-type">
        <!-- 普通 -->
        <template v-if="isSplit(item)">
          <template v-if="ROUND_BTNS.includes(`${item.lotteryCode}_${item.playTypeCode}`)">
            <div class="play-odds round-list">
              <OddsRoundBtn
                @selectOdds="selectNumber(numItem, item.playTypeName)"
                v-for="(numItem, index) in item.cachePlayList"
                :data="{ number: numItem.playName, odds: numItem.odds }"
                :key="index"
                :isSelected="isSelected(numItem)"
              />
            </div>
          </template>
          <template v-else>
            <div class="play-odds" :class="getCss(item)">
              <OddsBtn
                @selectOdds="selectNumber(numItem, item.playTypeName)"
                v-for="(numItem, index) in item.cachePlayList"
                :data="{ number: numItem.playName, odds: numItem.odds, maxOdds: numItem.maxOdds }"
                :key="index"
                :isSelected="isSelected(numItem)"
                :lotteryCode="item.lotteryCode"
                :playTypeCode="item.playTypeCode"
              />
            </div>
          </template>
        </template>
        <!-- 需要拆分 例如： 大小单双+数字 拆开 -->
        <template v-else>
          <div class="play-odds rect-list">
            <OddsBtn
              @selectOdds="selectNumber(numItem, item.playTypeName)"
              v-for="(numItem, index) in calcColums(item.cachePlayList, 'txt')"
              :data="{ number: numItem.playName, odds: numItem.odds, maxOdds: numItem.maxOdds }"
              :key="index"
              :isSelected="isSelected(numItem)"
            />
          </div>

          <div class="sub-title">
            个位球
            <span class="rate">(赔率1: {{ item?.cachePlayList?.[4]?.maxOdds }})</span>
          </div>
          <div class="play-odds round-list">
            <OddsRoundBtn
              @selectOdds="selectNumber(numItem, item.playTypeName)"
              v-for="(numItem, index) in calcColums(item.cachePlayList, 'number')"
              :data="{ number: numItem.playName, odds: numItem.odds }"
              :key="index"
              :isSelected="isSelected(numItem)"
            />
          </div>
        </template>
      </div>

      <!-- <div class="divider" v-if="isHideDivider(item)" /> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject, Ref } from 'vue'
import OddsBtn from './odds-btn.vue'
import OddsRoundBtn from './odds-btn-round.vue'
import { useInvestStore } from '@/stores/invest'
import { LotterCodeEnum } from '@/enum'
import { useUserStore } from '@/stores/user'
import { upperCase } from 'lodash-es'

const ROUND_BTNS = ['JNDEB_WTM', 'JNDSI_WTM', 'JNDWP_WTM', 'JNDWU_WTM', 'PCBJL_SZ']

type Props = {
  list: any[]
  hideTitle?: boolean
}

const props = defineProps<Props>()

const investStore = useInvestStore()

const userStore = useUserStore()

const selectBetList = inject<Ref<any[]>>('selectBetList')

const notifyParentInvestList = (list) => {
  investStore.setInvestNum(list)
}

const selectNumber = (item, preName) => {
  if (props.list[0]?.lotteryCode === 'PCNN') {
    const sameType = selectBetList.value.every((it) => it.playTypeCode === item.playTypeCode)
    if (!sameType) {
      selectBetList.value = []
      notifyParentInvestList([])
    }
  }
  if (props.list[0]?.lotteryCode === 'PCNN' && item.playTypeCode === 'SH') {
    // pcnn 梭哈
    let balance = userStore.userInfo.balance
    if (selectBetList.value.length) balance -= selectBetList.value[0].betAmount
    item.betAmount = balance > item.singleMaxLimit ? item.singleMaxLimit : balance
  } else {
    item.betAmount = investStore.getSingleInvestMoney
  }

  item['spliceName'] = `${preName}#${item.playName}`
  const index = check(item)

  if (index > -1) {
    selectBetList.value.splice(index, 1)
  } else {
    selectBetList.value.push(item)
  }

  notifyParentInvestList([...selectBetList.value])
}

const check = (item) => {
  const idx = selectBetList.value.findIndex(
    (i) =>
      i.playCode === item.playCode &&
      i.playTypeCode === item.playTypeCode &&
      i.sonPlayTypeCode === item.sonPlayTypeCode,
  )

  return idx
}

const getNumberRate = (item) => {
  return item?.cachePlayList?.[0]?.maxOdds ?? ''
}

const isSelected = (item) => {
  const idx = check(item)

  return idx > -1
}

const splits = ['DYWQ', 'DEWQ', 'DSWQ', 'WANW', 'QIANW', 'BAIW', 'SHIW', 'GEW']
const isSplit = (item) => {
  if (item.lotteryCode !== LotterCodeEnum.jndwp && item.lotteryCode !== LotterCodeEnum.jndssc) return true

  return !splits.includes(item.playTypeCode)
}

const calcColums = (list, type) => {
  if (type === 'txt') {
    return list.slice(0, 4)
  } else if (type === 'number') {
    return list.slice(4, list.length)
  }

  return []
}

const bigRect = ['JNDSSC_LHH']
const horizontalRect = ['JNDEB_DD', 'JNDSI_DD', 'JNDWU_DD', 'JNDWP_DD']
const pcbjlRect = ['PCBJL_ZXH']
const getCss = (item) => {
  const key = `${item.lotteryCode}_${item.playTypeCode}`

  if (bigRect.includes(key)) return 'big-rect-list'

  if (horizontalRect.includes(key)) return 'horizontal-rect-list'

  if (pcbjlRect.includes(key)) return 'pcbjl-zxh-list'

  if (item.playTypeCode) return 'rect-list'
}

const hideDivider = ['JNDSSC_LHH']
const isHideDivider = (item) => {
  const key = `${item.lotteryCode}_${item.playTypeCode}`

  return !hideDivider.includes(key)
}
</script>

<style scoped lang="less">
.play-box {
  width: 100%;
  margin-bottom: 12px;

  .divider {
    margin: 5px 0 6px;
    width: 100%;
    height: 0.5px;
    box-shadow: 0px 0.5px 0px 0px rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(225, 225, 225, 1);
  }

  .title {
    position: relative;
    text-align: left;
    font-size: 12px;
    color: #cfd1ff;
    margin-bottom: 5px;
    box-sizing: border-box;
    // padding-left: 5px;
    // &::before {
    //   content: '';
    //   position: absolute;
    //   left: 0;
    //   top: 50%;
    //   transform: translateY(-50%);
    //   width: 2px;
    //   height: 12px;
    //   border-radius: 0px 2px 2px 0px;
    //   background: #cfd1ff;
    //   box-sizing: border-box;
    // }

    .game-nav-underline {
      margin-top: 10px;
      height: 1px;
      width: 100%;
      background: #505e92;
    }
  }

  .underline {
    margin-top: 5px;
    margin-bottom: 5px;
    height: 1px;
    width: 100%;
    background: #505e92;
  }

  .play-odds {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    &.rect-list {
      :deep(.odds-item) {
        margin-right: calc((100% - (66px * 4)) / 3);

        &:nth-of-type(4n) {
          margin-right: 0;
        }
      }
    }

    &.round-list {
      :deep(.odds-item) {
        margin-right: calc((100% - (36px * 5)) / 5);

        &:nth-of-type(5n) {
          margin-right: 0;
        }
      }
    }

    &.big-rect-list {
      justify-content: space-between;

      :deep(.odds-item) {
        width: 90px !important;
        height: 150px !important;
        .number {
          font-size: 24px;
        }

        .odds {
          font-size: 20px;
        }
      }
    }

    &.horizontal-rect-list {
      justify-content: space-around;

      :deep(.odds-item) {
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        font-size: 14px;
        .number {
          margin-bottom: 3px;
        }

        .odds {
          font-size: 11px;
        }

        &.selected {
        }
      }
    }
    &.pcbjl-zxh-list {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      :deep(.odds-item) {
        min-width: 80px;
        width: 28.5%;
        height: 40px;
        height: 57px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        .number {
          line-height: 20px;
        }
        .odds {
          padding-top: 5px;
          box-sizing: border-box;
        }
        &:nth-child(1) {
          position: absolute;
          top: 0;
          left: 0;
        }
        &:nth-child(4) {
          position: absolute;
          top: 69px;
          left: 0;
        }
        &:nth-child(2) {
          position: absolute;
          top: 0;
          right: 0;
        }
        &:nth-child(5) {
          position: absolute;
          top: 69px;
          right: 0;
        }
        &:nth-child(3) {
          width: 33.5%;
          min-width: 98px;
          height: 126px;
          .number {
            font-size: 24px;
            padding-bottom: 30px;
            box-sizing: border-box;
          }
          .odds {
            font-size: 20px;
          }
        }
      }
    }
  }
}

.bet-list {
  width: 100%;
}

.rate {
  color: #ff4242;
}

.sub-title {
  margin: 12px 0 5px;
  color: #fff;
  text-align: left;
  font-size: 12px;
}
</style>
